<template>
  <div>
    <div>文章标题：<el-input v-model="title" style="width: 240px" placeholder="输入标题" /></div>
    <div>是否公开：
      <el-switch
        v-model="status"
        class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      />
    </div>
    <div>内容：
      <el-input
        v-model="content"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="输入内容"
      />
    </div>
    <div>
      <el-button type="primary" round @click="publishArticle">发布</el-button>
      <el-button type="success" round @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import http from '../utils/http'

const title = ref('')
const content = ref('')
const status = ref(true)
const router = useRouter()

const publishArticle = async () => {
  try {
    await http.post('/posts', {
      title: title.value,
      content: content.value,
      status: status.value
    })
    alert('文章发布成功!')
    resetForm()
    router.push('/admin') 
  } catch (error) {
    console.error('发布文章失败:', error)
    alert('发布文章失败!')
  }
}

const resetForm = () => {
  title.value = ''
  content.value = ''
  status.value = true
}
</script>

<style lang="css" scoped>
</style>
